<template>
  <div class="dynamicParameterBlock">
    <div class="config-list">
      <div v-if="dataProps.length">
        <div v-if="component === 'expression'" class="expression">
          <span v-for="(conditionRow, arrayIndex) in data" :key="'condition' + arrayIndex">
            {{ conditionRow }}
          </span>
        </div>
        <ul v-else>
          <li v-for="(conditionRow, conditionIndex) in data" :key="'condition' + conditionIndex">
            <el-link v-for="(link, linkIndex) in linkData" :key="'link' + linkIndex"
              :type="linkIndex % 2 === 0 ? 'primary' : ''">{{ link(conditionRow) }}</el-link>
          </li>
        </ul>
      </div>
      <div v-else class="not-data">
        {{ readonly ? '未选择数据' : '请选择数据' }}
      </div>
    </div>
    <el-button v-if="!readonly" type="text" class="edit-button" @click="$emit('updateDynamicParameter')">编辑列</el-button>
  </div>
</template>

<script setup lang="ts">
import {ref, computed } from 'vue';
import { questionMark } from 'src/utils/designerTool/constants'
const props = defineProps({
  component: {
    type: String,
    default: ''
  },
  data: {
    type: Array
  },
  readonly: {
    type: Boolean,
    default: false
  }
})
const dataProps=ref(props.data)
const linkData=computed(()=> {
      switch (props.component) {
        case 'dynamicParameter':
          return [
            (tiem:any) => item
          ]
        case 'conditionScreen':
          return [
            (tiem:any) => item.key || questionMark,
            (tiem:any) => item.filter,
            (tiem:any) => item.value || questionMark,
            (tiem:any) => item.operator
          ]
        case 'conditionUnitScreen':
          return [
            (tiem:any) => item.key || questionMark,
            (tiem:any) => item.value || questionMark,
            (tiem:any) => item.unit || questionMark,
            (tiem:any) => item.operator
          ]
        case 'sortScreen':
          return [
            (tiem:any) => item.key || questionMark,
            (tiem:any) => item.value
          ]
        case 'arraySection':
          return [
            (tiem:any) => item.key || questionMark,
            (tiem:any) => {
              return (item.min || questionMark) + ' - ' + (item.max || questionMark)
            }
          ]
        default:
          return [

          ]
      }
    })
</script>

<style lang="scss" scoped>
.dynamicParameterBlock {
  position: relative;

  .edit-button {
    position: absolute;
    top: -47px;
    right: 0;
  }

  .copy-button {
    display: flex;
    justify-content: flex-end;
  }

  .config-list {
    overflow: auto;
    max-height: 110px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 2px 10px;

    .expression {
      line-height: 22px;
    }

    ul {
      list-style: none;
      padding: 0;
      margin: 0;
      box-sizing: border-box;

      li {
        line-height: 20px;

        .el-link+.el-link {
          margin-left: 10px;
        }
      }
    }

    .el-empty {
      padding: 0;
    }

    &.expression {
      line-height: 26px;
    }

    .not-data {
      height: 104px;
      color: #909399;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
